<template>
  <!--备用-->
  <a-layout id="components-layout-demo-top-side-2" style="height: 100%;">
    <a-layout-header class="sflheader">
      <img src="http://dss.schaefflercn.com:9070/static/img/logo.png" alt="" style="float: left;height: inherit;">
      <p style="display: inline-block;margin: 0 50px;font-size: 22px;">舍弗勒明日舍园-安保管理系统</p>

      <div style="float:right;">
        <a-dropdown>
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            <a-avatar style="backgroundColor:#1DA57A" icon="user" />
            <span style="color: #333333;margin-left: 6px;font-size: 14px;">{{user.userNO}}</span>
          </a>
          <a-menu slot="overlay" style="top: 10px;">
            <a-menu-item>
              <a href="javascript:;" @click="quitLogin">退出登录</a>
            </a-menu-item>

          </a-menu>
        </a-dropdown>
      </div>

    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          mode="inline"
          :default-selected-keys="['1']"
          :style="{ height: '100%', borderRight: 0,overflowY: 'auto',
    overflowX: 'hidden',backgroundColor: '#e6e6e6' }"
          :open-keys.sync="openKeys"
          @openChange="onOpenChange"
          @click="clickMenu"
          :defaultSelectedKeys="[$route.name]"
          :selectedKeys="[$route.name]"

        >
          <!--:default-open-keys="openKeys"    添加这一句，只打开一个大类菜单，切换关闭其他菜单-->
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="contacts" />访客管理</span>
            <a-menu-item key="visitorDetails">
              <router-link to="visitorDetails" replace>访客明细</router-link>]
            </a-menu-item>
            <a-menu-item key="visitorDataDisplay">
              <router-link to="visitorDataDisplay" replace>访客数据展示</router-link>
            </a-menu-item>
            <a-menu-item key="visitorDataQuery">
              <router-link to="visitorDataQuery" replace>访客数据查询</router-link>
            </a-menu-item>
            <a-menu-item key="visitorUnitCount">
              <router-link to="visitorUnitCount" replace>访客单位访问统计</router-link>
            </a-menu-item>
            <a-menu-item key="visitorPersonsCount">
              <router-link to="visitorPersonsCount" replace>访客单位人次统计</router-link>
            </a-menu-item>
            <a-menu-item key="intervDeptCount">
              <router-link to="intervDeptCount" replace>被访者部门人次统计</router-link>
            </a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="car" />停车场管理</span>
            <a-menu-item key="carDetails">
              <router-link to="carDetails" replace>车辆明细</router-link>
            </a-menu-item>
            <a-menu-item key="carDataShow">
              <router-link to="carDataShow" replace>车位数据展示</router-link>
            </a-menu-item>
            <a-menu-item key="carDataQuery">
              <router-link to="carDataQuery" replace>车位数据查询</router-link>
            </a-menu-item>
            <a-menu-item key="carParkManage">
              <router-link to="carParkManage" replace>停车场远程管理</router-link>
            </a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="sub3">
            <span slot="title"><a-icon type="cluster" />权限管理</span>
            <a-menu-item key="purviewGroupDef">
              <router-link to="purviewGroupDef" replace>权限组定义</router-link>
            </a-menu-item>
            <a-menu-item key="adminDefinition">
              <router-link to="adminDefinition" replace>管理员定义</router-link>
            </a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="sub4">
            <span slot="title"><a-icon type="usergroup-add" />人事档案</span>
            <a-menu-item key="departDef">
              <router-link to="departDef" replace>部门定义</router-link>
            </a-menu-item>
            <a-menu-item key="personnelFile">
              <router-link to="personnelFile" replace>人员档案</router-link>
            </a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="sub5">
            <span slot="title"><a-icon type="hdd" />设备管理</span>
            <a-menu-item key="placeDefinition">
              <router-link to="placeDefinition" replace>场所定义</router-link>
            </a-menu-item>
            <a-menu-item key="deviceDefinition">
              <router-link to="deviceDefinition" replace>设备定义</router-link>
            </a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="sub6">
            <span slot="title"><a-icon type="setting" />系统设置</span>
            <a-menu-item key="systemDefinition">
              <router-link to="systemDefinition" replace>系统定义</router-link>
            </a-menu-item>
            <a-menu-item key="menuManage">
              <router-link to="menuManage" replace>菜单管理</router-link>
            </a-menu-item>
            <a-menu-item key="logQuery">
              <router-link to="logQuery" replace>日志查询</router-link>
            </a-menu-item>
          </a-sub-menu>

        </a-menu>
      </a-layout-sider>

      <!--右侧-->
      <a-layout style="padding: 10px">
        <!--面包屑导航-->
        <!-- <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>Home</a-breadcrumb-item>
          <a-breadcrumb-item>List</a-breadcrumb-item>
          <a-breadcrumb-item>App</a-breadcrumb-item>
        </a-breadcrumb> -->
        <a-layout-content :style="{ background: '#fff', padding: '0px', margin: 0, minHeight: '280px' }">

          <router-view/>

        </a-layout-content>
      </a-layout>
    </a-layout>

  </a-layout>
</template>

<script>
  import { tableBoxHeight } from "@/api/communal";
  import localezh_CN from 'antd/lib/locale-provider/zh_CN';
  import { ConfigProvider } from 'ant-design-vue';//引用
  import 'moment/locale/zh-cn';

  export default {
    components: {
      ConfigProvider
    },
    name:'',
    data() {
      return {
        localezh_CN,
        rootSubmenuKeys: ['sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6'],
        openKeys: ['sub1'],
        user:{
          userNO:"--"
        }

      }
    },
    beforeMount(){
      let _this = this;
      // console.log(this.$store.state.user);
      // if (this.$store.state.user.userNO) {
      //   this.user = this.$store.state.user;
      // } else {
      //   this.$warning({
      //     title: '登录信息已失效，请重新登录！',
      //     okText:"去登录",
      //     maskClosable: false,
      //     keyboard: false,
      //     onOk() {
      //       return new Promise((resolve, reject) => {
      //         _this.$router.replace("/");
      //         this.$nextTick(()=>{
      //           this.$destroyAll();
      //         })
      //       }).catch(() => {});
      //     },
      //     onCancel() {},
      //   });
      // }

      // 刷新页面时左侧菜单不能展开之前选中的menu
      let lastname = sessionStorage.getItem("openKeys");
      // console.log(lastname);
      // console.log(lastname.split(","));
      if (lastname != null && lastname != undefined ){
        this.openKeys = lastname.split(",");
      }

    },
    mounted() {
      // console.log(this.$route);
    },
    destroyed(){
      // 在页面销毁后
    },
    methods: {
      onOpenChange(openKeys) {
        // console.log(openKeys);
        const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
          this.openKeys = [openKeys];
        } else {
          this.openKeys = latestOpenKey ? [latestOpenKey] : [];
        }
        // console.log(this.openKeys);

      },

      clickMenu(item){
        // console.log(item);
        sessionStorage.setItem("openKeys", item.keyPath[1]);
      },
      quitLogin(){
        // 退出清空登陆人信息
        sessionStorage.setItem("user", JSON.stringify({}));
        this.$store.state.user = {};

        this.$router.replace("/");
      },

    },

  }
</script>

<style scoped>
  .sflheader{
    text-align: left;
    background: #0089ed url(http://dss.schaefflercn.com:9070/static/img/sflheader.jpg) no-repeat center center;
  }

</style>

